<template>
    <div class="player-layout">
        <!-- <h3>播放器组件</h3> -->
        <div class="wrap" @click="goLyric">
            <div class="left">
                <img style="width: 42px;" :src="picUrl" alt="">
            </div>
            <div class="center">
                <div>{{ name }}</div>
                <p>歌手</p>
            </div>
            <div class="right">
                <span class="icon icon-1"></span>
                <span class="icon icon-2"></span>
            </div>


            <div class="audio-box">
                <!-- <audio 
                    ref="audio"
                    controls
                    autoplay
                    :src="`https://music.163.com/song/media/outer/url?id=${music_id}.mp3`">
                </audio> -->
            </div>
        </div>

        <ul class="out-line">
            <li></li>
        </ul>
    </div>
</template>

<style lang="less">
@import url(../static/less/variable.less);
.player-layout {
    position: fixed;
    bottom: 84px;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 50px;
    background-color: #f0f0f0;
    padding: 0 10px 0 20px;
    box-sizing: border-box;
    .wrap {
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;

        .icon {
            display: inline-block;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background-size: cover;
        }

        .icon-1 {
            background-image: url(../static/images/i-play.png);
        }

        .icon-2 {
            background-image: url(../static/images/i-next-2.png);
            width: 24px;
            height: 24px;
            margin-left: 10px;
        }

        .text {
            font-size: 16px;
            padding: 0 10px;
        }

        .left {
            width: 50px;
        }

        .center {
            width: calc(100% - 130px);
            font-size: 15px;

            p {
                font-size: 12px;
                color: #666;
            }
        }

        .right {
            width: 70px;
        }
    }

    .out-line {
        width: 100%;
        height: 4px;
        background-color: #fff;
        position: absolute;
        bottom: -4px;
        left: 0;
        z-index: 100;
        li {
            width: 200px;
            height: 4px;
            background-color: @bgColor;
        }
    }
}
</style>

<script>

export default {
    // 自定义属性接收参数
    props: ['id', 'songs','type'],
    data() {
        return {
            music_id: '',
            music_type: '',
            name: '歌曲',
            picUrl: '',
        }
    },

    // 侦听器
    watch: {
        id: {
            immediate: true,
            handler(nid) {
                this.music_id = nid;
                // 把音乐id储存在本地
                localStorage.setItem('music_id', nid);
            }
        },
        type: {
            immediate: true,
            handler(ntype) {
                this.music_type = ntype;
                // 把音乐id储存在本地
                localStorage.setItem('music_type', ntype);
            }
        },
        songs: {
            deep: true,
            handler(newArr) {
                if (newArr.length == 0) return;
                // console.log("--->", this.id);
                newArr.forEach(item => {
                    if (item.id == this.id) {
                        // console.log("item:", item)
                        this.name = item.name;
                        this.picUrl = item.artist.picUrl;
                    }
                })
            }
        }
    },
    methods: {
        // 点击跳转歌词页
        goLyric() {
            //从本地储存空间获取参数
            let music_id = localStorage.getItem('music_id');
            let music_type = localStorage.getItem('music_type');

            //跳转页面携带
            this.$router.push({ path: '/lyric', query: {
                id: this.music_id || music_id, 
                type: this.music_type || music_type
            } })
        },
        // 文本滚动
        loopText() {
            let t = setInterval(() => {
                if (!this.name) return;
                let f = this.name.slice(0, 1);
                let e = this.name.slice(1);
                let str = e + f;
                this.name = str;
            }, 300)
        }
    },
    created() {
        this.loopText();
    }
}

</script>